---
title: 主题
description: 使用社区主题为 Starlight 文档添加样式
tableOfContents: false
sidebar:
  order: 2
head:
  - tag: style
    content: |
      body { --sl-content-width: 66.75rem; }
---

import ThemeGrid from '~/components/theme-grid.astro';

主题是一个 Starlight 插件，它通过 [自定义 CSS](/zh-cn/guides/css-and-tailwind/)、[组件重写](/zh-cn/guides/overriding-components/) 或其他新功能来改变网站的视觉外观。

## 社区主题

安装由社区构建的主题，快速自定义网站的外观和风格。

<ThemeGrid
	labels={{
		/** 主题切换按钮的无障碍标签。 */
		legend: '预览',
		/** 深色配色方案变体的无障碍标签。 */
		dark: '深色',
		/** 浅色主题变体的无障碍标签。 */
		light: '浅色',
	}}
	themes={[
		{
			title: 'Starlight Rapide',
			description:
				'Starlight 主题，灵感来源于 Visual Studio Code Vitesse 主题。',
			href: 'https://starlight-theme-rapide.vercel.app/',
			previews: { light: 'rapide-light.png', dark: 'rapide-dark.png' },
		},
		{
			title: 'Starlight Obsidian Theme',
			description: 'Starlight 主题，灵感来源于 Obsidian Publish 网站的风格。',
			href: 'https://fevol.github.io/starlight-theme-obsidian/',
			previews: { light: 'obsidian-light.png', dark: 'obsidian-dark.png' },
		},
		{
			title: 'Catppuccin for Starlight',
			description: '宁静的柔和色调的 Starlight 主题。',
			href: 'https://starlight.catppuccin.com/',
			previews: { light: 'catppuccin-light.png', dark: 'catppuccin-dark.png' },
		},
		{
			title: 'Ion',
			description: '一个时尚、现代的 Starlight 主题。',
			href: 'https://louisescher.github.io/starlight-ion-theme/',
			previews: { light: 'ion-light.png', dark: 'ion-dark.png' },
		},
		{
			title: 'Starlight Black',
			description: 'Starlight 主题，灵感来源于 shadcn 文档。',
			href: 'https://starlight-theme-black.vercel.app/',
			previews: { light: 'black-light.png', dark: 'black-dark.png' },
		},
		{
			title: 'Starlight Flexoki',
			description: '基于 Flexoki 配色方案的温暖友好主题。',
			href: 'https://delucis.github.io/starlight-theme-flexoki/',
			previews: { light: 'flexoki-light.png', dark: 'flexoki-dark.png' },
		},
		{
			title: 'Starlight Nova',
			description: '一个现代而美丽的 Starlight 主题。',
			href: 'https://starlight-theme-nova.pages.dev/',
			previews: { light: 'nova-light.png', dark: 'nova-dark.png' },
		},
		{
			title: 'Starlight NextJS Theme',
			description: 'Starlight 主题，灵感来源于 NextJS 文档。',
			href: 'https://starlight-nextjs-theme.trueberryless.org/',
			previews: { light: 'nextjs-light.png', dark: 'nextjs-dark.png' },
		},
	]}
/>

:::tip[添加你自己的！]
你构建了自己的 Starlight 主题吗？
[创建一个 PR](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md#themes) 来添加你的主题到此页面！
:::
